<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        function addcs(){
            var cs=document.createElement("li")
            cs.id="cs"
            cs.innerText="长沙"
            var city=document.getElementById("city")
            city.append(cs)
        }
        function addcsbeforesz(){
            var cs=document.createElement("li")
            cs.id="cs"
            cs.innerText="长沙"
            var city=document.getElementById("city")
            city.insertBefore(cs,sz)
        }
        function replaceSz(){
            var cs=document.createElement("li")
            cs.id="cs"
            cs.innerText="长沙"
            var city=document.getElementById("city")
            city.replaceChild(cs,sz)
        }function removeSz(){
            var cs=document.createElement("li")
            cs.id="cs"
            cs.innerText="长沙"
            var city=document.getElementById("city")
            sz.remove()
        }function clearcity(){
            var city=document.getElementById("city")
            /* var fc=city.firstChild
            while(fc!=null){
                fc.remove()
                fc=city.firstChild
            } */
           city.innerHTML=""
        }
        
    </script>

    </style>
</head>
<body>
    <ul id="city">
        <li id="bj">北京</li>
        <li id="sh">上海</li>
        <li id="sz">深圳</li>
        <li id="gz">广州</li>
    </ul>


    <hr>


    <button onclick="addcs()">增加长沙</button>
    <button onclick="addcsbeforesz()">在深圳前增加长沙</button>
    <button onclick="replaceSz()">将城市列表中sz替换成长沙</button>
    <button onclick="removeSz()">删除深圳</button>
    <button onclick="clearcity()">删除城市列表</button>
</body>
</html>